@charset"UTF-8";
$fontSize:40;   
@function r($p) {
    @return $p/$fontSize*1rem;
}
*{
    font-size: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
html{
    font-size: 40px;
}
.web{
    width: 100%;
    padding-bottom: r(250);
    >.top{
        width: 100%;
        height: r(75);
        border-bottom: 1px solid #a7a7a7;
        >ul{
            display: flex;
            justify-content: space-between;
            line-height: r(75);
            padding-left: r(28);
            padding-right: r(28);
            >li:nth-of-type(1){
                display: flex;
                align-items: center;
                >a{
                    height: r(31);
                    width: r(18);
                    >img{
                        height: r(31);
                        width: r(18);
                    }
                }
            }
            >li:nth-of-type(2){
                font-size: r(30);
                color: rgba(0,0,0,9);
            }
            >li:nth-of-type(3){
                >a{
                   font-size: r(24);
                   color: #343434;
                }
                 
                 
            }
        }
    }
    >.content{
        width: 100%;
        margin-bottom: r(29);
        >ul{
            >li{
                padding-left: r(29);
                padding-right: r(29);
                line-height: r(100);
                height: r(100);
                border-bottom: 1px solid #dcdcdc;
                display: flex;
                justify-content: space-between;
                >span{
                    color: #737373;
                    font-size: r(24);
                }
            }
            >li:first-of-type{
                >div{
                    height: 100%;
                    >a{
                        height: 100%;
                        display: flex;
                        align-items: center;
                       >img{
                        width: r(15);
                        height: r(25);
                        } 
                    }
                    
                }
            }
            >li:nth-of-type(2){
                >div{
                    display: flex;
                    align-items: center;
                    >label{
                        >.tuoyuan{
                            height: r(60);
                            width: r(100);
                            border-radius: r(30);
                            background: black;
                            display: flex;
                            align-items: center;
                            >.yuan{
                                width: r(56);
                                height: r(56);
                                border-radius: r(90);
                                background: white;
                                border: r(1) solid black;
                            }
                        }
                    }
                    >#boxOne:checked+label>.tuoyuan{
                        background: white;
                        border: r(2) solid #b2b2b2;
                    }
                    >#boxOne:checked+label>.tuoyuan>.yuan{
                        background: white;
                        border: r(1) solid #b2b2b2;
                        transform: translateX(1.05rem);
                    }
                    
                }
                
            }
            >li:nth-of-type(3){
                >div{
                    display: flex;
                    align-items: center;
                    >label{
                        >.tuoyuan{
                            height: r(60);
                            width: r(100);
                            border-radius: r(30);
                            background: black;
                            display: flex;
                            align-items: center;
                            >.yuan{
                                width: r(56);
                                height: r(56);
                                border-radius: r(90);
                                background: white;
                                border: r(1) solid black;
                            }
                        }
                    }
                    >#boxTwo:checked+label>.tuoyuan{
                        background: white;
                        border: r(2) solid #b2b2b2;
                    }
                    >#boxTwo:checked+label>.tuoyuan>.yuan{
                        background: white;
                        border: r(1) solid #b2b2b2;
                        transform: translateX(1.05rem);
                    }
                    
                }
                
            }
            >li:nth-of-type(4){
                >div{
                    display: flex;
                    align-items: center;
                    >label{
                        >.tuoyuan{
                            height: r(60);
                            width: r(100);
                            border-radius: r(30);
                            background: black;
                            display: flex;
                            align-items: center;
                            >.yuan{
                                width: r(56);
                                height: r(56);
                                border-radius: r(90);
                                background: white;
                                border: r(1) solid black;
                            }
                        }
                    }
                    >#boxThree:checked+label>.tuoyuan{
                        background: white;
                        border: r(2) solid #b2b2b2;
                    }
                    >#boxThree:checked+label>.tuoyuan>.yuan{
                        background: white;
                        border: r(1) solid #b2b2b2;
                        transform: translateX(1.05rem);
                    }
                    
                }
                
            }
            >li:nth-of-type(5){
                >div{
                    display: flex;
                    align-items: center;
                    >label{
                        >.tuoyuan{
                            height: r(60);
                            width: r(100);
                            border-radius: r(30);
                            background: black;
                            display: flex;
                            align-items: center;
                            >.yuan{
                                width: r(56);
                                height: r(56);
                                border-radius: r(90);
                                background: white;
                                border: r(1) solid black;
                            }
                        }
                    }
                    >#boxFour:checked+label>.tuoyuan{
                        background: white;
                        border: r(2) solid #b2b2b2;
                    }
                    >#boxFour:checked+label>.tuoyuan>.yuan{
                        background: white;
                        border: r(1) solid #b2b2b2;
                        transform: translateX(1.05rem);
                    }
                    
                }
                
            }
        }
    }
    >.foot{
        margin-top: r(29);
        width: r(300);
        height: r(68);
        background: #333333;
        display: flex;
        align-items: center;
        margin: 0 auto;
        border-radius: r(6);
        >a{
            width: 100%;
            >p{
            color: white;
            font-size: r(24);
            width: 100%;
            text-align: center;
            }
        }
        
    }
}
